<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             :inline="true"
             v-show="showSearch"
             size="small"
             label-width="88px">
      <el-form-item label="账单编号"
                    prop="billNum">
        <el-input v-model="queryParams.billNum"
                  placeholder="请输入账单编号"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="账单状态"
                    prop="billState">
        <el-select clearable
                   v-model="queryParams.billState"
                   placeholder="请选择账单状态">
          <el-option label="执行中"
                     value="0"></el-option>
          <el-option label="已作废"
                     value="1"></el-option>
          <el-option label="已过期"
                     value="2"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索
        </el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['energy:sfBill:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['energy:sfBill:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['energy:sfBill:export']">导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-tabs v-model="tabActiveName" @tab-click="tabClick">
      <el-tab-pane label="未支付" name="1"></el-tab-pane>
      <el-tab-pane label="部分支付" name="2"></el-tab-pane>
      <el-tab-pane label="已支付" name="3"></el-tab-pane>
      <el-tab-pane label="全部" name="4"></el-tab-pane>
    </el-tabs>

    <el-table v-loading="loading"
              :data="feBillList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center"/>
      <el-table-column label="账单编号"
                       width="120"
                       align="center"
                       prop="billNum"/>
      <el-table-column label="企业名称"
                       width="120"
                       show-overflow-tooltip
                       align="center"
                       prop="enterpriseName"/>
      <el-table-column label="费用类型"
                       align="center"
                       prop="feeTypeName"/>
      <el-table-column label="账单起始日期"
                       align="center"
                       prop="beginDate"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单结束日期"
                       align="center"
                       prop="endDate"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应收金额"
                       align="center"
                       prop="receivableAmount"/>
      <el-table-column label="实收金额"
                       align="center"
                       prop="payAmount"/>
      <el-table-column label="结清状态"
                       align="center"
                       prop="payState">
        <template slot-scope="scope">
          <span>{{
              scope.row.payState === "0"
                ? "待支付"
                : scope.row.payState === "1"
                  ? "部分支付"
                  : scope.row.payState === "2"
                    ? "已支付"
                    : "暂无"
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单状态"
                       align="center"
                       prop="billState">
        <template slot-scope="scope">
          <span>{{
              scope.row.billState === "0"
                ? "执行中"
                : scope.row.billState === "1"
                  ? "已作废"
                  : scope.row.billState === "2"
                    ? "已过期"
                    : "暂无"
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="截止日期(逾期产生违约费)"
                       align="center"
                       prop="deadline"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deadline, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right"
                       label="操作"
                       align="center"
                       fit
                       class-name="small-padding fixed-width"
                       min-width="400">
        <template slot-scope="scope">
          <div style="display: flex;flex-wrap: nowrap;white-space: nowrap;justify-content: center;align-items: center;padding: 0 20px">
            <el-button size="mini"
                       type="text"
                       icon="el-icon-document-checked"
                       @click="showReOkFn(scope.row)"
                       v-if="!scope.row.isSubmit"
                       v-hasPermi="['energy:sfBill:reOk']">账单确认
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-document-checked"
                       @click="handlePrint(scope.row)"
                       v-if="scope.row.isSubmit&&scope.row.payState!=='2'"
                       v-hasPermi="['energy:sfBill:pay']">打印
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-document-checked"
                       @click="handleZhifu(scope.row)"
                       v-if="scope.row.isSubmit&&scope.row.payState!=='2'"
                       v-hasPermi="['energy:sfBill:pay']">收款
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-document-delete"
                       @click="handleTui(scope.row)"
                       v-if="scope.row.isSubmit&&parseFloat(scope.row.payAmount) >0"
                       v-hasPermi="['energy:sfBill:reback']">退款
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-document-delete"
                       @click="handleDamagesDetail(scope.row)"
                       v-if="scope.row.isSubmit"
                       v-hasPermi="['energy:sfBill:reback']">缴费明细
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleDamages(scope.row)"
                       v-if="scope.row.isSubmit"
                       v-hasPermi="['energy:sfBill:edit']">违约金
            </el-button>
            <el-button size="mini"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleEndFn(scope.row)"
                       v-if="scope.row.isSubmit&&scope.row.payState!=='2'"
                       v-hasPermi="['energy:sfBill:edit']">结束
            </el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>


    <!-- 添加或修改收款明细对话框支付 -->
    <el-dialog title="企业租金账单"
               :visible.sync="zhiOpen"
               width="800px"
               center
               append-to-body>
      <el-form ref="zhiForm"
               :model="zhiForm"
               :rules="zhiRules"
               label-width="80px">
        <div class="zhifucon">
          <div class="item">
            <span>编号：</span>
            <span>{{ form.billNum }}</span>
          </div>
          <div class="item">
            <span>企业名称：</span>
            <span>{{ form.enterpriseName }}</span>
          </div>
          <div class="item">
            <span>费用周期：</span>
            <span>{{ form.beginDate }}至{{ form.endDate }}</span>
          </div>
          <div class="item">
            <span>账单类型：</span>
            <span>{{ form.feeTypeName }}</span>
          </div>
        </div>
        <div class="zhifucon">
          <div class="item">
            <span>租赁面积：</span>
            <span>{{ form.totalArea }}</span>
          </div>
          <div class="item">
            <span>租赁单价：</span>
            <span>{{ form.unitPrice }}</span>
          </div>

        </div>
        <div class="zhifucon">
          <div class="item">
            <span>收款账户：</span>
            <span>{{ form.receiptAccount }}</span>
          </div>
          <div class="item">
            <span>应收费用：</span>
            <span>{{ form.receivableAmount }}</span>
          </div>
          <div class="item">
            <span>应收违约金：</span>
            <span>{{ form.totalFine }}</span>
          </div>
          <div class="item">
            <span>已收金额：</span>
            <span>{{ form.payAmount }}</span>
          </div>
          <div class="item">
            <span>账单收款金额:</span>
            <span>
              <el-input size="small"
                        v-model="zhiForm.receiptAmount"
                        placeholder="请输入账单收款金额"/>
            </span>
          </div>

          <div class="item">
            <span>违约金收款金额:</span>
            <span>
              <el-input size="small"
                        v-model="zhiForm.receiptTotalFine"
                        placeholder="请输入违约金收款金额"/>
            </span>
          </div>

          <div class="item">
            <span>收款时间:</span>
            <span>
              <el-date-picker clearable
                              size="small"
                              v-model="zhiForm.receiptTime"
                              type="date"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择收款时间">
              </el-date-picker>
            </span>
          </div>

          <div class="item">
            <span>备注：</span>
            <el-input size="small"
                      v-model="zhiForm.remark"
                      placeholder="请输入收款备注"/>
          </div>

        </div>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFormZhi">确 定
        </el-button>
        <el-button @click="zhiOpen=false">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 账单确认 -->
    <el-dialog title="企业物业费用账单确认"
               :visible.sync="showReOk"
               width="700px"
               center
               append-to-body>
      <el-form ref="zhiForm"
               :model="zhiForm"
               :rules="zhiRules"
               label-width="80px">
        <div class="zhifucon">
          <div class="item">
            <span>编号：</span>
            <span>{{ form.billNum }}</span>
          </div>
          <div class="item">
            <span>企业名称：</span>
            <span>{{ form.enterpriseName }}</span>
          </div>
          <div class="item">
            <span>费用周期：</span>
            <span>{{ form.beginDate }}至{{ form.endDate }}</span>
          </div>
          <div class="item">
            <span>账单类型：</span>
            <span>{{ form.feeTypeName }}</span>
          </div>
        </div>
        <div class="zhifucon">
          <div class="item">
            <span>租赁面积(㎡)：</span>
            <span>{{ form.totalArea }}</span>
          </div>
          <div class="item">
            <span>物业单价(元)：</span>
            <span>{{ form.unitPrice }}</span>
          </div>
        </div>


        <div class="zhifucon">
          <div class="item">
            <span>应收费用：</span>
            <span>{{ form.receivableAmount }}</span>
          </div>
          <div class="item">
            <span>收款账户：</span>
            <el-select v-model="form.receiptAccount" style="width: 180px;" @change="receiptAccountSelect">
              <el-option :value="item.acName" :label="item.acName" v-for="(item,index) in accountOptions"
                         :key="index"></el-option>
            </el-select>
          </div>

          <!--          <div class="item">-->
          <!--            <span>应收违约金：</span>-->
          <!--            <span>{{form.totalFine}}</span>-->
          <!--          </div>-->
          <div class="item">
            <span>应收违约金：</span>
            <span>{{ form.totalFine }}</span>
            <!--            <el-input v-model="form.totalFine" placeholder="请输入应收违约金" disabled></el-input>-->
          </div>

        </div>


      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="reOkSubmit">确定
        </el-button>
        <el-button @click="cancelZhi">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="结束账单" :visible.sync="showEndCause" width="500px">
      <div style="display: flex;align-items: center">
        <div style="width: 100px;">结束原因：</div>
        <el-input v-model="form.remark" placeholder="请输入结束原因"></el-input>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm">确 定
        </el-button>
        <el-button @click="showEndCause=false">取 消</el-button>
      </div>

    </el-dialog>


    <!-- 添加或修改退款明细对话框 -->
    <el-dialog title="添加退款明细"
               :visible.sync="tuiOpen"
               width="500px"
               append-to-body>
      <el-form ref="tuiForm"
               :model="tuiForm"
               :rules="tuiRules"
               label-width="80px">

        <el-form-item label="退款方式"
                      prop="refundMethod">
          <el-input v-model="tuiForm.refundMethod"
                    placeholder="请输入退款方式"/>
        </el-form-item>
        <el-form-item label="退款金额"
                      prop="refundAmount">
          <el-input v-model="tuiForm.refundAmount"
                    placeholder="请输入退款金额"/>
        </el-form-item>
        <el-form-item label="退款时间"
                      prop="refundTime">
          <el-date-picker clearable
                          size="small"
                          v-model="tuiForm.refundTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择退款时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收款人"
                      prop="payee">
          <el-input v-model="tuiForm.payee"
                    placeholder="请输入收款人"/>
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="tuiForm.remark"
                    type="textarea"
                    placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFormTui">确 定
        </el-button>
        <el-button @click="cancelTui">取 消</el-button>
      </div>
    </el-dialog>

    <print-jiao-fei v-if="!isEmpty(printData)" :visible.sync="showPrint" :printData="printData"></print-jiao-fei>

  </div>
</template>

<script>
import {
  listSfBill,
  getSfBill,
  delSfBill,
  updateSfBill,
} from '@/api/smartParks/operatingFee/operatingFeeReceivable'
import {listSysBillAccount} from "@/api/life/sysBillAccount";
import {
  addSfReceiptDetail,
  updateSfReceiptDetail,
} from '@/api/smartParks/operatingFee/operatingFeePayment'

import {
  addSfRefundDetail,
  updateSfRefundDetail,
} from '@/api/smartParks/operatingFee/operatingFeeRefund'

export default {
  name: 'feeCom',
  components: {},
  props:{
    /*
    * 0 设施费用
    * 1 物业费用
    * 2 办公费用
    * */
    feeType:{
      default:'0',
      type: String
    }
  },
  data() {
    return {
      accountOptions: [],//收款账户
      tabActiveName: '1',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      showPrint: false,
      showEndCause: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 应收账单表格数据
      feBillList: [],
      printData:null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        billNum: null,
        enterprisePersonal: null,
        enterpriseName: null,
        personalName: null,
        feeId: null,
        beginDate: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        tenantId: null,
        billState: null,
        payState: 0,
        feeTypeName: '办公费用'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        delFlag: [
          {
            required: true,
            message: '删除标志(0正常 1删除)不能为空',
            trigger: 'blur',
          },
        ],
      },
      zhiOpen: false,
      showReOk: false,//显示账单确认
      zhiForm: {},
      zhiRules: {},
      tuiOpen: false,
      tuiForm: {},
      tuiRules: {},
      printList: []
    }
  },
  created() {
    /*
    * 0 设施费用
    * 1 物业费用
    * 2 办公费用
    * */
    if (this.feeType==='0'){
      this.queryParams.feeTypeName="设施费用"
    }else  if (this.feeType==='1'){
      this.queryParams.feeTypeName="物业费用"
    }else  if (this.feeType==='2'){
      this.queryParams.feeTypeName="办公费用"
    }
    this.getList()
    listSysBillAccount().then(res => {
      let data = res.rows
      this.accountOptions = data
    })
  },
  methods: {
    receiptAccountSelect(ac){
      console.log(ac)
    },
    /** 查询应收账单列表 */
    getList() {
      this.loading = true
      listSfBill(this.queryParams).then((response) => {
        this.feBillList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    closePrint() {
      this.showPrint = false
    },
    getAccountInfo(val) {
      let ac = this.getDictObj(this.accountOptions, val, 'acName', 'depositBank')
      if (this.isEmpty(ac)) {
        return {
          acCode: '',
          depositBank: ''
        }
      } else {
        return ac
      }
    },
    handleDamagesDetail(row) {
      this.$router.push({
        name: 'OperatingFeePayment',
        query: {id: row.billNum},
      })
    },
    handleDamages(row) {
      this.$router.push({
        name: 'Damages',
        query: {id: row.id},
      })
    },
    // 结束账单
    handleEndFn(row) {
      this.reset()
      const id = row.id || this.ids
      getSfBill(id).then((response) => {
        this.form = response.data
        this.showEndCause = true
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        billNum: null,
        enterpriseId: null,
        feeType: null,
        beginDate: null,
        feeTypeName: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        payState: null,
        billState: null,
        feeContent: null,
        deadline: null,
        createBy: null,
        recordId: null,
        createTime: null,
        totalArea: null,
        updateBy: null,
        unitPrice: null,
        updateTime: null,
        surety: null,
        remark: null,
        quantity: null,
        delFlag: null,
        checkMeterId: null,
        actualDosage: null,
        feeAmount: null,
        shareCoefficient: null,
        shareQuantity: null,
        shareAmount: null
      }
      this.printData=null
      this.feeDetail = []
      this.resetForm('form')
    },
    showReOkFn(row) {
      this.reset()
      getSfBill(row.id).then((response) => {
        this.form = response.data
        this.showReOk = true
        this.resetZhi()
        this.zhiForm.billId = row.id
      })
    },
    handlePrint(row){
      this.reset()
      getSfBill(row.id).then((response) => {
        console.log('hh', response.data)
        this.printData = response.data
        this.showPrint=true
      })
    },
    handleZhifu(row) {
      this.reset()
      getSfBill(row.id).then((response) => {
        this.form = response.data
        console.log(this.form)
        this.resetZhi()
        this.zhiForm.enterpriseId=this.form.enterpriseId
        this.zhiForm.enterpriseName=this.form.enterpriseName
        this.zhiForm.receiptAccount=this.form.receiptAccount
        this.zhiForm.receiptAccountId=this.form.receiptAccountId
        this.zhiForm.receiptAccountNum=this.form.receiptAccountNum
        this.zhiForm.receiptAccountBank=this.form.receiptAccountBank
        this.zhiForm.billId = row.id
        this.zhiOpen = true
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSfBill(id).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改应收账单'
      })
    },
    tabClick(tab, par) {
      let panName = tab.paneName
      if (panName == '1') {
        this.queryParams.payState = 0
      } else if (panName == '2') {
        this.queryParams.payState = 1
      } else if (panName == '2') {
        this.queryParams.payState = 2
      } else {
        this.queryParams.payState = null
      }
      this.getList()
    },
    submitFormZhi() {
      if (parseFloat(this.zhiForm.receiptAmount) + parseFloat(this.form.payAmount) > parseFloat(this.form.receivableAmount)) {
        this.msgError('收款金额不能大于应收金额-已收金额')
        return false
      }
      this.$refs['zhiForm'].validate((valid) => {
        if (valid) {
          if (this.zhiForm.id != null) {
            updateSfReceiptDetail(this.zhiForm).then((response) => {
              this.msgSuccess('修改成功')
              this.zhiOpen = false
              this.getList()
            })
          } else {
            addSfReceiptDetail(this.zhiForm).then((response) => {
              this.msgSuccess('新增成功')
              this.zhiOpen = false
            })
          }
        }
      })
    },
    cancelZhi() {
      this.showReOk = false
      this.resetZhi()
    },
    // 表单重置
    resetZhi() {
      this.zhiForm = {
        id: null,
        billId: null,
        receiptMethod: null,
        receiptAmount: null,
        receiptTime: null,
        arrivalTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
        receiptTotalFine:null,
        receiptAccount: null,
        garbageFee: null,
        sewageFee: null,
        elevatorRepairFee: null,
        elevatorRunFee: null,
        totalFine: null,
      }
      this.resetForm('zhiForm')
    },
    handleTui(row) {
      this.tuiOpen = true
      this.resetTui()
      this.tuiForm.billId = row.id
    },
    cancelTui() {
      this.tuiOpen = false
      this.resetTui()
    },
    resetTui() {
      this.tuiForm = {
        id: null,
        billId: null,
        refundMethod: null,
        refundAmount: null,
        refundTime: null,
        payee: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
      }
      this.resetForm('tuiForm')
    },
    submitFormTui() {
      this.$refs['tuiForm'].validate((valid) => {
        if (valid) {
          if (this.tuiForm.id != null) {
            updateSfRefundDetail(this.tuiForm).then((response) => {
              this.msgSuccess('修改成功')
              this.tuiOpen = false
              this.getList()
            })
          } else {
            addSfRefundDetail(this.tuiForm).then((response) => {
              this.msgSuccess('新增成功')
              this.tuiOpen = false
              this.getList()
            })
          }
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        billNum: null,
        enterprisePersonal: null,
        enterpriseName: null,
        personalName: null,
        feeId: null,
        beginDate: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        tenantId: null,
        billState: null,
        payState: 0,
      }
      if (this.feeType==='0'){
        this.queryParams.feeTypeName="设施费用"
      }else  if (this.feeType==='1'){
        this.queryParams.feeTypeName="物业费用"
      }else  if (this.feeType==='2'){
        this.queryParams.feeTypeName="办公费用"
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加应收账单'
    },
    printClose() {
      this.printList = []
      this.showPrint = false
    },
    /** 提交按钮 */
    submitForm() {
      this.form.payState = '2'
      this.form.billState = '1'
      updateSfBill(this.form).then((response) => {
        this.msgSuccess('修改成功')
        this.showEndCause = false
        this.getList()
      })
    },
    reOkSubmit() {
      this.form.isSubmit = true
      let acount=this.accountOptions.find((item)=>{
        return item.acName===this.form.receiptAccount
      })
      this.form.receiptAccountId=acount.id
      this.form.receiptAccountNum=acount.acCode
      this.form.receiptAccountBank=acount.depositBank
      updateSfBill(this.form).then((response) => {
        this.showReOk = false
        // this.showPrint = true
        this.getList()
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm(
        '是否确认删除应收账单编号为"' + ids + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(function () {
          return delSfBill(ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'energy/sfBill/export',
        {
          ...this.queryParams,
        },
        `energy_sfBill.xlsx`
      )
    },
  },
}
</script>
<style scoped lang="scss">
.zhifucon {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 50%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    span:first-child {
      flex-shrink: 0;
      width: 30%;
      display: inline-block;
    }
  }
}

.print-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px;
  width: 1123px;
  box-sizing: border-box;

  .print-box-t {
    margin-top: 20px;
    font-weight: 600;
    font-size: 18px;
  }

  .print-box-st {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 30px 0 20px;
  }

  .print-box-c {
    width: 100%;
    background: #fff;
  }

  .bbl-t {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    box-sizing: border-box;

  }


  .table_col {
    width: 100%;
    display: flex;
    font-size: 12px;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .table_col_a {
      width: 4%;
      height: 100%;
      border: 1px solid #666;
      border-right: none;
      writing-mode: tb-rl;
      letter-spacing: 8px;
      padding-top: 8px;
    }

    .table_col_b {
      width: 30%;
      height: 100%;
      display: flex;
      border: none;
      flex-direction: column;
      border: 1px solid #666;

      .table_col_b_b {
        //border: 1px solid #666;
        border-top: 1px solid #666;
      }
    }


    .table_col_b_a {
      width: 100%;
      height: 30px;
    }

    .table_col_b_b {
      width: 100%;
      flex-grow: 1;

      span {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        border-right: 1px solid #666;

        &:last-child {
          border-right: none;
        }
      }
    }

    .table_col_d_b {
      width: 100%;
      flex-grow: 1;

      span {
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        border-right: 1px solid #666;

        &:last-child {
          border-right: none;
        }
      }
    }

    .table_col_c {
      width: 36%;
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid #666;
      border-left: none;

      .table_col_b_b {
        border-top: 1px solid #666;
      }
    }

    .table_col_d {
      width: 22%;
      height: 100%;
      border: 1px solid #666;
      border-left: none;
      display: flex;
      flex-direction: column;

      .table_col_d_t {
        width: 100%;
        height: 30px;

        span {
          display: flex;
          width: 20%;
          height: 100%;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #666;

          &:last-child {
            border-right: none;
          }
        }

      }

      .table_col_d_b {
        width: 100%;
        flex-grow: 1;
        border-top: 1px solid #666;
      }

      span {
        width: 25%;
      }

    }


    .table_col_e {
      width: 8%;
      height: 100%;
      border: 1px solid #666;
      padding-top: 8px;
      text-align: center;
      border-left: none;
    }
  }

  .table_t {
    height: 100px;
  }


  .dt-tow {
    width: 40% !important;

    span {
      width: 50% !important;
    }
  }

  .col-c-box {
    height: 28px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;

    span {
      flex: 1;
      height: 100%;
      border-right: 1px solid #666;
      display: flex;
      justify-content: center;
      align-items: center;

      &:last-child {
        border-right: none;
      }
    }

    div {
      box-sizing: border-box;
    }

    &:nth-child(1) {
      width: 4%;
      border-left: 1px solid #666;
    }

    &:nth-child(2) {
      width: 30%;
    }

    &:nth-child(3) {
      width: 36%;
    }

    &:nth-child(4) {
      width: 22%;
    }

    &:nth-child(5) {
      width: 8%;
    }
  }

  .tb-b {
    height: 50px;
    font-size: 14px;

    .col-c-box {
      height: 100%;

      &:nth-child(1) {
        width: 34%;
      }

      &:nth-child(2) {
        width: 36%;

        span:nth-child(1) {
          flex: 1;
        }

        span:nth-child(2) {
          flex: 5.1;
        }
      }

      &:nth-child(3) {
        width: 30%;
      }
    }
  }
}



</style>
